<template>
  <div class="wish-pool" ref="wishPool">
    <div id="danmu-wrapper">
      <div id="danmu-content"></div>
      <div id="danmu-area"></div>
    </div>
    <div class="center-div promise" v-if="!hasWishFlag" @click="setPromise">
      <!-- <van-button @click="setPromise">戳我
        <br />
        许愿
      </van-button> -->
      <img class="w-btn" src="@/assets/img/wish/button.jpg" @click="setPromise" />
      <div>
        <p>我要</p>
      <p>许愿</p>
      </div>
    </div>
    <div class="center-div2" v-else>
      <van-button class="has-promise" @click="getMyPromise">查看我的愿望</van-button>
    </div>
    <img class="w-bottle" src="@/assets/img/wish/bottle.jpg" />
    <van-popup v-model:show="showPop" position="bottom" :style="{ height: '10vh' }">
      <van-row class="pop-row">
        <van-col><input type="text" class="wish-input" v-model="myWish" label="" placeholder="许个愿吧(不能发送纯数字)"
            @keydown.enter="sendWish" /></van-col>
        <van-col><van-button @click="sendWish">发送</van-button></van-col>
      </van-row>
    </van-popup>
    <van-overlay :show="showWish" @click="closeShowWish">
      <div class="overlay-wrapper" @click.stop>
        <div class="overlay-block">
          <img class="" src="@/assets/img/wish/popbg.jpg" />
          <p class="wish-title">2024我的愿望</p>
          <p class="mywish">{{ myHasWish }}</p>
        </div>
        <div class="overlay-close" @click="closeShowWish">
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, defineEmits, onMounted, Ref } from "vue";
import { slideUp, slideDown } from "@/utils/slide";
import DanmuJs from "danmu.js";
import { getSelfWish, setSelfWish, getOtherPersonWish } from "@/api/report";
import { Toast } from "vant";
const props = defineProps<{
  stats: any;
}>();
const emit = defineEmits(["slideUp", "slideDown"]);

onMounted(async () => {
  initDanmu();
  initWish();
});

const myWish = ref<string>("");
const sendWish = async () => {
  const res = await setSelfWish(myWish.value)
  console.log('发送愿望', res)
  if (res.code === 200) {
    Toast.success("发送成功")
    showPop.value = false;
    initWish();
  } else {
    Toast.fail("发送失败，" + res.message)
  }

}
const wishPool = ref<any>(null);

watch(wishPool, () => {
  slideUp(wishPool.value, () => {
    console.log("event");
    emit("slideUp");
  });
  slideDown(wishPool.value, () => {
    emit("slideDown");
  });
});
const hasWishFlag = ref<boolean>(false);
const myHasWish = ref<string>("无");
const initWish = async () => {
  const res = await getSelfWish()
  let wishContent = ""
  console.log('许的源', res)
  if (res.code === 200 && res.data) {
    wishContent = res.data.wishContent
    myHasWish.value = wishContent
    hasWishFlag.value = true
  } else {
    hasWishFlag.value = false
  }
  if (wishContent) {
    sendMyselfComment(wishContent)
  }
  initOtherPersonWish()
}
const sendMyselfComment = (txt: string) => {
  danmu.sendComment({
    // 发送弹幕
    duration: 5000,
    id: -1,
    txt: `我:${txt}`, // 弹幕文字内容
    style: {
      fontSize: "0.48rem",
      lineHeight: 1.125,
      backgroundColor: '#000F67',
      color: "#fff",
      borderRadius: "0.586rem",
      padding: "0.3rem 0.4rem",
    },
    originData: {
      x: "2121",
    },
  });
}
const otherWishArr: Ref<any> = ref([])
const initOtherPersonWish = async () => {
  const res2 = await getOtherPersonWish(20)
  console.log('别人的', res2)
  if (res2.code !== 200) {
    otherWishArr.value = [{ userName: "无名氏", wishContent: "未获取到任何内容" }]
    Toast.fail('获取弹幕内容失败')
  } else {
    otherWishArr.value = res2.data
  }

  start();
}


let danmu: any = null;
const initDanmu = () => {
  danmu = new DanmuJs({
    container: document.getElementById("danmu-content"), // 弹幕容器，该容器发生尺寸变化时会自动调整弹幕行为
    containerStyle: {
      // 弹幕容器样式
      zIndex: 100,
    },
    player: document.getElementById("danmu-area"), // 配合音视频元素（video或audio）同步使用时需提供该项
    comments: [
      // 弹幕预存数组,配合音视频元素（video或audio）同步使用时需提供该项
      {
        // duration: 20000, // 弹幕持续显示时间,毫秒(最低为5000毫秒)
        moveV: 100, // 弹幕匀速移动速度(单位: px/秒)，设置该项时duration无效
        id: "0", // 弹幕id，需唯一
        start: 0, // 弹幕出现时间（毫秒）
        prior: true, // 该条弹幕优先显示，默认false
        color: true, // 该条弹幕为彩色弹幕，默认false
        txt: '', // 弹幕文字内容
        style: {
          // 弹幕自定义样式
          color: '#213547',
          // background:"",
          fontSize: '16px',
          padding: '2px 11px'
        },
        mode: 'bottom', // 显示模式，top顶部居中，bottom底部居中，scroll滚动，默认为scroll
      }
    ],
    area: {
      // 弹幕显示区域
      start: 0, // 区域顶部到播放器顶部所占播放器高度的比例
      end: 1, // 区域底部到播放器顶部所占播放器高度的比例
      lines: 5 //  弹幕虚拟轨道显示行数。当指定行数时，显示范围 start/end 不生效；当弹幕字体大小超过所需要的总虚拟轨道数时，弹幕也不会出现在轨道上，因此请设置好弹幕fontSize及影响弹幕高度的其他样式，让弹幕和轨道高度匹配
    },
    channelSize: 40, //  轨道大小
    mouseControl: true, //  打开鼠标控制, 打开后可监听到 bullet_hover 事件。danmu.on('bullet_hover', function (data) {})
    mouseControlPause: false, //  鼠标触摸暂停。mouseControl: true 生效
    // bOffset: 1000, //  可调节弹幕横向间隔（毫秒）
    defaultOff: true, //  开启此项后弹幕不会初始化，默认初始化弹幕
    chaseEffect: true, //  开启滚动弹幕追逐效果, 默认为true
  });
  console.log("弹幕状态", danmu.status);
};
const start = async () => {
  danmu.start();
  let id = 0;
  otherWishArr.value.forEach(async (item: any, index: number) => {
    id++;
    const odd = id % 2;
    console.log('弹幕', item)
    danmu.sendComment({
      // 发送弹幕
      duration: 5000,
      id,
      txt: item.userName + ":" + item.wishContent, // 弹幕文字内容
      style: {
        fontSize: "0.48rem",
        lineHeight: 1.125,
        backgroundColor: odd ? '#0974DB' : '#45D0CB',
        color: "#fff",
        borderRadius: "0.586rem",
        opacity: 0.9,
        padding: "0.3rem 0.4rem",
        margin: "0"
      },
      originData: {
        x: "2121",
      },
    });
    if (index === 19) {
      danmu.stop();
      await initOtherPersonWish();
    }
  })
  // 当otherWishArr循环完后，再次调用initOtherPersonWish
}
const showPop = ref<boolean>(false);
const setPromise = () => {
  showPop.value = true;
}
const showWish = ref<boolean>(false);
const getMyPromise = () => {
  showWish.value = true;
}
const closeShowWish = () => {
  showWish.value = false;
}


</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
